import React, { Component } from 'react';
import store from '../../redux/store';
import { addAction, minusAction, asyncAction } from '../../redux/count_action';

export default class Count extends Component {

  handleAdd = () => {
    const { value } = this.selectVal;
    store.dispatch(addAction(value*1))
  }

  handleMinus = () => {
    const { value } = this.selectVal;
    store.dispatch(minusAction(value*1))
  }

  handleOdd = () => {
    const { value } = this.selectVal;
    if(value % 2 !== 0) {
      store.dispatch({
        type: 'odd',
        data: value * 1
      })
    }
  }

  handleAsync = () => {
    const { value } = this.selectVal;
    store.dispatch(asyncAction(value * 1, 1000));
  }
  
  render() {
    return (
      <div>
        <h1>当前count值：{ store.getState() }</h1>
        <select ref={c => this.selectVal = c} name="" id="">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <button onClick={ this.handleAdd }>增加</button>&nbsp;
        <button onClick={ this.handleMinus }>减少</button>&nbsp;
        <button onClick={ this.handleOdd }>odd +</button>&nbsp;
        <button onClick={ this.handleAsync }>async +</button>&nbsp;
      </div>
    );
  }
}
